<template>
  <div class="gallary" @click="handleBannerClick">
    <!-- :options="swiperOption" v-if="showSwiper"  -->
    <swiper class="wrapper" :options="swiperOption">
      <swiper-slide v-for="(item,key) in imgs" :key="key">
        <img class="gallary-img" :src="item" alt />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "gallary",
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    handleBannerClick(){
    
        this.$emit('close');
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        paginationType: "fraction"
      }
    };
  }
};
</script>
<style lang='stylus' scoped>
.gallary {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .wrapper {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    background: white;

    .gallary-img {
      width: 100%;
    }
  }
}
</style>